<template>
	<view class="detail-container">
		<!-- 顶部状态卡片 -->
		<view class="status-card" :class="'status-' + valiFormData.status">
			<view class="status-content">
				<!-- <view class="status-icon">
					<image :src="statImg[valiFormData.status]" mode="aspectFit" class="icon"></image>
				</view> -->
				<view class="status-info">
					<text class="status-text">{{ statusText[valiFormData.status] }}</text>
					<!-- <text class="create-time">{{ formatTime(valiFormData.create_date) }}</text> -->
				</view>
			</view>
			<view class="status-bar"></view>
		</view>

		<!-- 详情内容 -->
		<scroll-view scroll-y="true" class="detail-scroll">
			<!-- 基础信息 -->
			<uni-section title="基础信息" type="line" padding>
				<view class="info-group">
					<info-item label="申请人" :value="valiFormData.username" icon="person"></info-item>
					<info-item label="电话" :value="valiFormData.mobile" type="phone" icon="phone"
						@phone-click="makePhoneCall"></info-item>
					<info-item label="乘车人数" :value="valiFormData.p_num" icon="group"></info-item>
					<info-item label="同行人员" :value="valiFormData.follower || '无'" icon="people"></info-item>
					<info-item label="事由" :value="valiFormData.reason" icon="compose"></info-item>
				</view>
			</uni-section>

			<!-- 行程信息 -->
			<uni-section title="行程信息" type="line" padding>
				<view class="info-group">
					<info-item label="出发时间" :value="valiFormData.start_time" icon="time"></info-item>
					<info-item label="预计结束" :value="valiFormData.estimated_time" icon="time-filled"></info-item>
					<info-item label="上车地点" :value="valiFormData.boarding_location" icon="location"></info-item>
					<info-item label="目的地" :value="valiFormData.destination" icon="map-pin"></info-item>
				</view>
			</uni-section>

			<!-- 车辆信息 -->
			<uni-section title="车辆信息" type="line" padding>
				<view class="info-group">
					<template v-if="role_id >=5 && valiFormData.status == 0">
						<view class="form-item">
							<view class="form-label">
								<uni-icons type="person" size="16" color="#666"></uni-icons>
								<text>司机</text>
							</view>
							<uni-data-select class="select" :arrayConfig="configParams" v-model="value"
								@change="s_change" :localdata="driverData" placeholder="请选择司机"></uni-data-select>
						</view>
					</template>
					<template v-else>
						<info-item label="司机" :value="valiFormData.driver_name" icon="person"></info-item>
					</template>

					<info-item label="司机电话" :value="valiFormData.driver_mobile" type="phone" icon="phone"
						@phone-click="makePhoneCall"></info-item>
					<info-item label="车牌" :value="valiFormData.car_license" icon="car"></info-item>
					<info-item label="车型" :value="valiFormData.car_model" icon="car-filled"></info-item>

					<view class="form-item">
						<view class="form-label">
							<uni-icons type="flag" size="16" color="#666"></uni-icons>
							<text>是否加班</text>
						</view>
						<template v-if="role_id >=5 && valiFormData.status == 0">
							<switch :checked="isovertime" @change="changeovertime" />
						</template>
						<template v-else>
							<text class="text-value">{{ valiFormData.overtime ? '是' : '否' }}</text>
						</template>
					</view>
				</view>
			</uni-section>

			<!-- 审批信息 -->
			<uni-section title="审批信息" type="line" padding>
				<view class="info-group">
					<info-item label="审批人" :value="valiFormData.approve_name" icon="staff"></info-item>
					<info-item label="审批时间" :value="valiFormData.approve_time" icon="time"></info-item>
					<info-item label="完成时间" :value="valiFormData.end_time" icon="checkmark"></info-item>

					<view v-if="valiFormData.status == 3" class="refuse-reason">
						<view class="reason-label">
							<uni-icons type="clear" size="16" color="#f56c6c"></uni-icons>
							<text>驳回理由</text>
						</view>
						<view class="reason-content">{{ valiFormData.refuse || '无' }}</view>
					</view>
				</view>
			</uni-section>
		</scroll-view>

		<!-- 底部操作按钮 -->
		<view v-if="role_id >= 5 && valiFormData.status == 0" class="footer-actions">
			<button class="action-btn reject" @click="reject">驳回</button>
			<button class="action-btn approve" @click="submit">通过申请</button>
		</view>
	</view>
</template>

<script>
	import InfoItem from '@/components/info-item/info-item.vue';
	export default {
		components: {
			'info-item': InfoItem
		},
		data() {
			return {
				role_id: 0,
				_id: null,
				value: -1,
				isovertime: false,
				userinfo: {},
				valiFormData: {
					username: '',
					mobile: '',
					p_num: '',
					follower: '',
					start_time: '',
					estimated_time: '',
					boarding_location: '',
					destination: '',
					reason: '',
					driver_name: '',
					driver_mobile: '',
					car_license: '',
					car_model: '',
					status: 0,
					approve_name: '',
					approve_time: '',
					end_time: '',
					overtime: false,
					create_date: 0
				},
				driverData: [],
				configParams: {
					labelKey: "name",
					valueKey: "_id",
				},
				// statImg: {
				// 	0: "/static/schedules/review.png",
				// 	1: "/static/schedules/dispatch.png",
				// 	2: "/static/schedules/complete.png",
				// 	3: "/static/schedules/refuse.png",
				// 	4: "/static/schedules/cancel.png"
				// },
				statusText: {
					0: "待审核",
					1: "已派车",
					2: "已完成",
					3: "已驳回",
					4: "已取消"
				}
			}
		},
		onReady() {
			this._id = uni.$router.params._id
			this.getCarSchedulesById(uni.$router.params._id)
		},
		onShow() {
			let userinfo = uni.getStorageSync('userInfo')
			if (userinfo) {
				this.userinfo = userinfo
				this.role_id = userinfo.role?.value || 0
			}
		},
		methods: {
			formatTime(timestamp) {
				if (!timestamp) return ''
				return uni.$dayjs(timestamp).format('YYYY-MM-DD HH:mm')
			},
			makePhoneCall(phoneNumber) {
				const numberStr = String(phoneNumber)
				uni.makePhoneCall({
					phoneNumber: numberStr,
					success: () => console.log("拨号成功！"),
					fail: (err) => console.log("拨号失败：", err)
				});
			},
			dataforeach(data, res) {
				Object.keys(data).forEach(key => {
					if (res[key]) {
						this.valiFormData[key] = res[key]
					}
				})
			},
			async getCarSchedulesById(id) {
				const obj = uniCloud.importObject('schedules')
				const res = await obj.getCarSchedulesById({
					_id: id
				}).then(res => {
					this.dataforeach(this.valiFormData, res)
				})
				this.getDriver()
			},
			s_change(e) {
				if (e && e.value) {
					this.value = e.value
					const obj = uniCloud.importObject('car')
					obj.getDriverInfoById({
						_id: e.value
					}).then(res => {
						if (res && res.length > 0) {
							this.valiFormData.car_license = res[0].license
							this.valiFormData.driver_name = res[0].name
							this.valiFormData.driver_mobile = res[0].mobile
							this.valiFormData.car_model = res[0].model
						}
					})
				} else {
					this.valiFormData.car_license = ''
					this.valiFormData.driver_name = ''
					this.valiFormData.driver_mobile = ''
					this.valiFormData.car_model = ''
				}
			},
			getDriver() {
				const obj = uniCloud.importObject('car')
				obj.getDriverInfoAll({
					status: 0,
					schedule_date: uni.$dayjs(this.valiFormData.start_time).format('YYYY-MM-DD')
				}).then(res => {
					this.driverData = res.map(item => ({
						value: item._id,
						text: item.name
					}));
				})
			},
			pushsms(event) {
				const obj = uniCloud.importObject('sms')
				obj.pushmsg(event)
			},
			submit() {
				if (!this.valiFormData.driver_name || !this.valiFormData.car_license) {
					uni.showToast({
						title: '请指派司机',
						icon: 'none',
						duration: 1000
					});
					return
				}

				const event = {
					_id: this._id,
					data: {
						...this.valiFormData,
						status: 1,
						approve_time: uni.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
						approve_name: this.userinfo.username
					}
				}

				const obj = uniCloud.importObject('schedules')
				obj.updateCarSchedules(event).then(res => {
					this.pushsms({
						mobile: this.valiFormData.mobile,
						driver_name: this.valiFormData.driver_name,
						driver_mobile: this.valiFormData.driver_mobile,
						car_license: this.valiFormData.car_license
					})

					const obj_driver = uniCloud.importObject('driver')
					obj_driver.updateDriverStatus({
						_id: this.value,
						data: {
							status: 1
						}
					}).then(r => {
						uni.redirectTo({
							url: "/pagesA/car/schedules_list"
						})
					})
				})
			},
			reject() {
				uni.showModal({
					title: '驳回申请',
					content: '请输入驳回理由',
					editable: true,
					placeholderText: '请说明驳回原因',
					success: (res) => {
						if (res.confirm && res.content) {
							const event = {
								_id: this._id,
								data: {
									...this.valiFormData,
									status: 3,
									refuse: res.content,
									approve_time: uni.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
									approve_name: this.userinfo.username
								}
							}

							const obj = uniCloud.importObject('schedules')
							obj.updateCarSchedules(event).then(() => {
								uni.redirectTo({
									url: "/pagesA/car/schedules_list"
								})
							})
						}
					}
				})
			},
			changeovertime() {
				this.isovertime = !this.isovertime
				this.valiFormData.overtime = this.isovertime
			}
		}
	}
</script>

<style lang="scss">
	$primary-color: #2979ff;
	$success-color: #18bc37;
	$warning-color: #f3a73f;
	$danger-color: #e54d42;
	$gray-color: #f8f8f8;
	$border-color: #eee;

	.detail-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}

	.status-card {
		border-radius: 0 0 20rpx 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		&.status-0 {
			background: linear-gradient(135deg, #6a93cb, #a4bfef);
		}

		// 待审核
		&.status-1 {
			background: linear-gradient(135deg, #4facfe, #00f2fe);
		}

		// 已派车
		&.status-2 {
			background: linear-gradient(135deg, #43e97b, #38f9d7);
		}

		// 已完成
		&.status-3 {
			background: linear-gradient(135deg, #fa709a, #fee140);
		}

		// 已驳回
		&.status-4 {
			background: linear-gradient(135deg, #d3d3d3, #a9a9a9);
		}

		// 已取消

		.status-content {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			.status-icon {
				width: 100rpx;
				height: 100rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.status-info {
				flex: 1;
				color: white;

				.status-text {
					font-size: 40rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 10rpx;
				}

				.create-time {
					font-size: 26rpx;
					opacity: 0.9;
				}
			}
		}

		.status-bar {
			height: 6rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 3rpx;
		}
	}

	.detail-scroll {
		flex: 1;
		padding: 20rpx;
		overflow: hidden;
	}

	.info-group {
		background: #fff;
		border-radius: 16rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
	}

	/* 确保组件样式正确继承 */
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.text-value {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		max-width: 65%;
		text-align: right;

		&.phone {
			color: #2979ff;
			text-decoration: underline;
		}
	}

	.refuse-reason {
		padding: 20rpx 0;

		.reason-label {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: $danger-color;
			margin-bottom: 10rpx;

			text {
				margin-left: 8rpx;
			}
		}

		.reason-content {
			background: #fef0f0;
			padding: 20rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #f56c6c;
			line-height: 1.6;
		}
	}

	.select {
		flex: 1;
		/* 让元素自动伸展，填充剩余空间 */
		margin-left: 30rpx;
		/* 在标签和选择框之间增加一个固定的左边距 */
		/* 注意：可以移除 width: 70% 这一行，或者让 flex: 1 覆盖它 */
	}

	.footer-actions {
		display: flex;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);

		.action-btn {
			flex: 1;
			height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 15rpx;

			&.reject {
				background: #fff;
				color: $danger-color;
				border: 1rpx solid $danger-color;
			}

			&.approve {
				background: linear-gradient(135deg, $success-color, #2dd048);
				color: white;
				border: none;
				box-shadow: 0 4rpx 12rpx rgba(24, 188, 55, 0.3);
			}

			&::after {
				border: none;
			}
		}
	}
</style>